<template>
    <!-- 自定义播放组件 -->
    <div style="padding: 0.25rem;">
        <div class="sw-video-component" style="position: relative;background-color: #0000009e;">
            <div class="sw-video-title">{{ name }}</div>
            <!-- <video class="sw-video-content" :id="id" controls controlsList="nodownload noplaybackrate" muted
                poster="@/assets/images/room-off.png"></video> -->
            <video-player :id="id" class="video-player vjs-custom-skin" ref="videoPlayer" :options="playerOptions"
                @loadeddata="onLoadedData"></video-player>
        </div>
    </div>
</template>

<script>
// import mpegts from 'mpegts.js'; // 测试能播放H.264编码方式

const baseSize = 20
export default {
    name: 'sw-video',
    emits: ['fullscreen'],
    computed: {},
    props: {
        name: { type: String },
        url: { type: String, required: true },
    },
    watch: {
    },
    data() {
        return {
            id: null,
            show: false,
            player: null,
            playerOptions: {}
        }
    },
    created() {
        this.id = this.$uuid();
    },
    mounted() {
        this.init()
    },
    methods: {
        /** 监听视频 */
        onLoadedData(player) {
            player.on('fullscreenchange', () => {
                // player.isFullscreen_就是全屏的状态，true为全屏，false为不全屏
                this.$emit('fullscreen', player.isFullscreen())
            })
        },
        init() {
            this.playerOptions = {
                // controls: false,
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: true, // 如果为true,浏览器准备好时开始回放。
                muted: true, // 静音。
                loop: false, // 是否视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
                language: 'zh-CN',
                aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                    type: "application/x-mpegURL", //如果是直播的话  此处务必这样配置
                    src: this.url,
                    // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
                    // src: 'http://192.168.1.107:8090/youyang/102.live.ts', // url地址H.264
                    // src: 'http://192.168.1.107:8090/qijiang/702.live.ts' // url地址H.265
                    // src: 'http://192.168.1.107:8090/youyang/102/hls.m3u8', // 能播放
                    // src: 'http://192.168.1.107:8090/chengkou/101/hls.m3u8', // 播放出来是黑屏
                }],
                poster: '', // 封面地址
                notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false, // 当前时间和持续时间的分隔符
                    durationDisplay: false, // 显示持续时间
                    remainingTimeDisplay: false, // 是否显示剩余时间功能
                    fullscreenToggle: true, // 是否显示全屏按钮
                    progressControl: false, // 显示进度条
                    playToggle: true, // ...播放暂停按钮
                }
            }
            return;
            if (mpegts.getFeatureList().mseLivePlayback) {
                let videoElement = document.getElementById(this.id);
                this.player = mpegts.createPlayer({
                    type: 'mse',  // could also be mpegts, m2ts, flv
                    isLive: false, // 是否实时流
                    hasAudio: false, // 是否有音轨
                    enableWorker: false, // 启用分离线程进行传输
                    enableWorkerForMSE: false, // 启用分割线程
                    enableStashBuffer: true, // 取消缓冲区延时最小，但是出现网络波动可能会停止播放
                    lazyLoad: true, // 如果有足够的数据支持回访则http终止连接
                    lazyLoadMaxDuration: 1, // 指示要为lazyLoad保留多少秒的数据
                    lazyLoadRecoverDuration: 3, // 以秒为单位的lazyLoad恢复时间边界
                    autoCleanupSourceBuffer: true, // 为SourceBuffer做自动清理吗
                    url: this.url // url地址H.264
                });
                this.player.attachMediaElement(videoElement);
                this.player.load();
                this.player.play();
            }
            return;
        },

    }
}
</script>

<style lang="scss" scoped>
.sw-video-component {
    width: 16.9rem;
    height: 10rem;
    max-height: 100%;
    max-width: 100%;
}

.sw-video-title {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.65);
    box-sizing: border-box;
    padding: 0 0.25rem;
    font-size: 0.8rem;

    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    color: #EDEDED;
    text-align: center;
    font-style: normal;
    text-transform: none;
}

.sw-video-content {
    // 视频拉伸
    // object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-player ::v-deep.vjs-control-bar {

    // display: none ;
    .vjs-subs-caps-button,
    .vjs-audio-button,
    .vjs-playback-rate,
    .vjs-live-control,
    .vjs-current-time {
        display: none;
    }
}
</style>